<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>登录页面111</h1>
    账号：<input type="text" name="username" /><br />
    密码：<input type="password" name="pwd" /><br />
    <button class="btn">提交</button>
    <p></p>
    <script>
        // ajax代替 form 表单提交 - 权利一样 POST、传递数据
        // ajax也可以post、传递数据 x.send(请求体数据);

        // 添加点击事件 - 获取按钮
        let btn = document.querySelector('.btn');
        let p = document.querySelector('p');
        let inp = document.querySelectorAll('input');
        btn.onclick =function(){
            
            // 发送ajax请求

            // 1. 创建一个ajax请求对象
            let x = new XMLHttpRequest();

            // 2. 打开请求
            x.open('POST','/login');

            // 3. 发送请求
            // post发送数据 必须设置请求头 文本类型
            x.setRequestHeader('Content-type','application/x-www-form-urlencoded');
            // 请求体数据格式 - name=val&name=val
            x.send(`username=${inp[0].value}&pwd=${inp[1].value}`);

            // console.log(inp[0].value);
            // console.log(`username=${inp[0].value}&pwd=${inp[1].value}`);
            x.responseType = 'json';
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    console.log(x.response);
                    p.innerHTML = x.response.message;
                    if(x.response.code === 200){
                        p.innerHTML = x.response.message;
                        setTimeout(() => {
                            // 登录成功
                             window.location.href = '/center';
                        }, 1000);
                    }

                    // p.innerHTML = x.response;

                    // console.log(JSON.parse(x.response));

                    // let data = JSON.parse(x.response);

                    // console.log(obj.message);
                    
                    // p.innerHTML = data.message;
                    // 验证登录成功跳转
                    // if(data.code === 200){
                    //     setTimeout(() => {
                    //         window.location.href = '/center';
                    //     }, 1000);
                    // }
                }
            }
        }



    </script>
</body>
</html>